<template>
    <a-drawer width="100%" :visible="visible" :body-style="{ paddingBottom: '80px', background: '#f0f2f5' }" placement="right"
        :get-container="false"  :style="{ position: 'absolute'}"  :closable="false" :footer-style="{ textAlign: 'right' }">
        <a-card class="mb-2">
            <a-row :gutter="24">
                <a-col :span="20"  class="text-center" >
                    <div class="flex flex-row">
                        <div class="w-40 ">
                            <div class="mb-2">项目名称</div>
                            <div style="font-weight: 600;">{{ info.proName }}</div>
                        </div>
                        <div class="w-40 ">
                            <div class="mb-2">成本预算总额（元）</div>
                            <div style="font-weight: 600;">{{ info.amount }}</div>
                        </div>
                        <div class="w-32  ">
                            <div class="mb-2">负责人</div>
                            <div style="font-weight: 600;">{{ info.directorName }}</div>
                        </div>
                        <div class="w-32  ">
                            <div class="mb-2">申请人</div>
                            <div style="font-weight: 600;">{{ info.createUserName||"无" }}</div>
                        </div>

                        <div class="w-32   ">
                            <div class="mb-2">提审状态</div>
                            <div style="font-weight: 600;">{{ info.status||"新建未提审" }}</div>
                        </div>
                        <div class="w-32">
                            <div class="mb-2">申请部门</div>
                            <div style="font-weight: 600;">工程部</div>
                        </div>
                    </div>
                </a-col>
                <a-col :span="4" class="text-right">
                    <a-button @click="onClose(false)">返回</a-button>
                    <!-- <a-button class="ml-2" @click="save" type="primary">申请审批</a-button> -->
                </a-col>
            </a-row>
        </a-card>
        <a-card class="mb-2">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="材料成本明细">
                   <material />
                </a-tab-pane>
                <a-tab-pane key="2" tab="劳务成本明细">
                   <labor />
                </a-tab-pane>
                <a-tab-pane key="3" tab="其他成本明细">
                   <other />
                </a-tab-pane>
              
            </a-tabs>
        </a-card>

    </a-drawer>
</template>
<script setup >

import taskInfo from '@/components/Task/info.vue'

import material from './material.vue';
import labor from './labor.vue';
import other from './other.vue';
const props = defineProps({
    code: {
        type: String,
    }
})
 
const editRef=ref()
const { code } = toRefs(props)
const visible = ref(false)
const activeKey = ref('1')
watch(code, () => {
 
});
const emits = defineEmits(['OnClose'])
const onClose = (flag) => {
    visible.value = false;
    emits('OnClose', flag)
};
const save=()=>{

}
const info=ref({})
const show=(record)=>{
    info.value={...record}
    visible.value=true
}
defineExpose({
    show
});

</script>
